<div 
    {{#if id}}id="{{id}}"{{/if}}
    class="card my-2 {{class}}" 
    data-pre-init="chart" 
    data-sqlpage-js="{{static_path 'apexcharts.js'}}"
>
    <div class="card-body">
        <div class="d-flex">
            <h3 class="card-title">{{title}}</h3>
        </div>
        <div class="chart" style="height: {{default height 250}}px;">
            <div class="d-flex justify-content-center h-100 align-items-center">
                <div class="spinner-border" role="status" style="width: 3rem; height: 3rem;">
                    <span class="visually-hidden">Loading...</span>
                </div>
            </div>
            <data hidden>
{
    "type": {{stringify type}},
    "time": {{stringify time}},
    "labels": {{stringify labels}},
    "marker": {{stringify marker}},
    "xtitle": {{stringify xtitle}},
    "ytitle": {{stringify ytitle}},
    "ztitle": {{stringify ztitle}},
    "xticks": {{stringify xticks}},
    "yticks": {{stringify yticks}},
    "ystep": {{stringify ystep}},
    "xmin": {{stringify xmin}},
    "ymin": {{stringify ymin}},
    "xmax": {{stringify xmax}},
    "ymax": {{stringify ymax}},
    "toolbar": {{stringify toolbar}},
    "logarithmic": {{stringify logarithmic}},
    "horizontal": {{stringify horizontal}},
    "stacked": {{stringify stacked}},
    "height": {{stringify (default height 250)}},
    "colors": {{stringify (to_array color)}},
    "points": [
    {{~#each_row~}}
        {{~#if (gt @row_index 0)}},{{/if~}}
        [
            {{~ stringify (default series (default ../title "")) ~}},
            {{~ stringify (default x label) ~}},
            {{~ stringify (default y value) ~}}
            {{~#if z}}, {{~ stringify z ~}} {{~/if~}}
        ]
    {{~/each_row~}}
    ]
}
            </data>
        </div>
    </div>
</div>
